<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <div>00:00:00:0000</div>
    <button>开始</button>
    <script>
        var h = 0, m = 0, s = 0, mi = 0, count = 0, time;
        var but = document.querySelector('button');
        var div = document.querySelector('div');

        but.onclick = function () {
            count++;
            if (count % 2 == 0) {
                but.innerHTML = "开始";
                clearInterval(time);
                h = 0; m = 0; s = 0; mi = 0;
                return;
            }
            but.innerHTML = "暂停";
            time = setInterval(function () {
                mi += 5;
                //console.log(mi);
                if (mi >= 1000) {
                    mi = 0;
                    s++;

                }

                if (s >= 60) {
                    m++;
                    s = 0;
                } if (m >= 60) {
                    h++;
                    m = 0;
                }
                var h1 = h < 10 ? "0" + h : h;
                var m1 = m < 10 ? "0" + m : m;
                var s1 = s < 10 ? "0" + s : s;

                var mi1 = mi + "";
                mi1 = mi1.padStart(4, "0");
                div.innerHTML = `${h1}:${m1}:${s1}${mi1}`;
            }, 5)
        }
    </script>
</body>

</html>